import React, { useState,useEffect } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { addVipApi } from '@/api/vip/vip'
import { Card, Space, message } from 'antd';
import './index.less'
import {
    Button,
    Col,
    Form,
    Input,
    Row,
    Select,
    DatePicker
} from 'antd';
import useStore from '@/store/index'
const { Option } = Select;

const tailFormItemLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 16,
        offset: 16,
      },
    },
  };
// 性别选项
const sex = (
    <Form.Item name="sex" noStyle>
        <Select style={{ width: 70 }}>
            <Option value="男士">男士</Option>
            <Option value="女士">女士</Option>
            <Option value="保密">保密</Option>
        </Select>
    </Form.Item>
);
const payMethod = (
    <Form.Item name="payMethod" noStyle>
        <Select style={{ width: 100 }}>
            <Option value="微信支付">微信支付</Option>
            <Option value="支付宝">支付宝</Option>
            <Option value="现金">现金</Option>
            <Option value="其他">其他</Option>
        </Select>
    </Form.Item>
);
const vipRank = (
    <Form.Item name="vipRank" noStyle>
        <Select style={{ width: 100 }}>
            <Option value="黄金会员">黄金会员</Option>
            <Option value="铂金会员">铂金会员</Option>
            <Option value="砖石会员">砖石会员</Option>
        </Select>
    </Form.Item>
);
// 开卡时间
const openTime = {
    rules: [{ type: 'object' as const, required: true, message: '请选择开卡日期' }],
};
// 到期时间
const expires = {
    rules: [{ type: 'object' as const, required: true, message: '请选择到期日期!' }],
};
//   生日
const born = {
    rules: [{ type: 'object' as const, required: true, message: '请选择出生日期!' }],
};

const AddVip: React.FC = () => {
    const [form] = Form.useForm();
    const [id, setId] = useState('')
    const userInfo = useStore<any>((state: any) => state.userInfo)
    useEffect(()=>{
        setId(uuidv4())
    },[])
    // 表单数据收集
    const onFinish = async (values: any) => {
        let vipObj: any = {}
        vipObj.id = id
        vipObj.vipName = values.vipName
        vipObj.sex = values.sex
        vipObj.vipPhone = values.vipPhone
        vipObj.openTime = values.openTime.format('YYYY-MM-DD'),
            vipObj.expires = values.expires.format('YYYY-MM-DD'),
            vipObj.born = values.born.format('YYYY-MM-DD'),
            vipObj.openMoney = values.openMoney
        vipObj.payMethod = values.payMethod
        vipObj.vipRank = values.vipRank
        vipObj.money = values.money
        vipObj.score = values.score
        vipObj.openStaff = values.openStaff
        vipObj.belongToShop = userInfo.storeId
        try {
            let addVipRes = await addVipApi(vipObj)
            if (addVipRes.code == 200) {
                message.open({
                    type: 'success',
                    content: addVipRes.msg,
                });
                form.resetFields()
                setId('')
            } else {
                message.open({
                    type: 'warning',
                    content: addVipRes.msg,
                });
            }
        } catch (error: any) {
            message.open({
                type: 'error',
                content: error,
            });

        }

        // console.log('Received values of form: ', values);
    };

    const createUuid = () => {
        setId(uuidv4())
    }
    return (
        <div>
                <Card title="基本信息" style={{ width: '100%' }}>
                    <Form
                    
                        form={form}
                        name="register"
                        onFinish={onFinish}
                        scrollToFirstError
                    >
                        <Row >
                        <div className='myForm'>
                       
                       
                       
                       </div>
                            <Col xs={24} sm={24} md={12} lg={12} xl={8}>
                            <div className='myFormItem'>
                            {/* 会员卡号 */}
                            <Row gutter={8}>

                                <div>* 会员卡号：</div>

                                <Input value={id} />

                                <Button block onClick={createUuid}>生成卡号</Button>
                            </Row>
                            {/* 会员姓名 */}
                            <Form.Item
                                name="vipName"
                                label="会员姓名"
                                rules={[{ required: true, message: '请输入会员姓名' }]}
                            >
                                <Input addonAfter={sex} style={{ width: '100%' }} />
                            </Form.Item>
                            {/* 会员手机 */}
                            <Form.Item
                                name="vipPhone"
                                label="会员手机"
                                rules={[{ required: true, message: '请输入您的会员手机号' }]}
                            >
                                <Input style={{ width: '100%' }} />
                            </Form.Item>
                            {/* 开卡日期 */}
                            <Form.Item name="openTime" label="开卡日期" {...openTime}>
                                <DatePicker format="YYYY-MM-DD" />
                            </Form.Item>
                            <Form.Item name="expires" label="到期时间" {...expires}>
                                <DatePicker format="YYYY-MM-DD" />
                            </Form.Item>
                            <Form.Item name="born" label="出生日期" {...born}>
                                <DatePicker format="YYYY-MM-DD" />
                            </Form.Item>
                        </div>
                            </Col>
                            <Col xs={24} sm={24} md={12} lg={12} xl={8}> 
                            <div className='myFormItem'>
                            <Form.Item
                                name="openMoney"
                                label="开卡费用"
                                rules={[{ required: true, message: '请输入开卡费用' }]}
                            >
                                <Input style={{ width: '100%' }} addonAfter={payMethod} />
                            </Form.Item>
                            <Form.Item
                                name="vipRank"
                                label="会员等级"
                                rules={[{ required: true, message: '请输入会员等级' }]}
                            >
                                <Input style={{ width: '100%' }} addonAfter={vipRank} />
                            </Form.Item>
                            <Form.Item
                                name="money"
                                label="初始金额"
                                rules={[{ required: true, message: '请输入初始金额' }]}
                            >
                                <Input style={{ width: '100%' }} addonAfter={'元'} />
                            </Form.Item>
                            <Form.Item
                                name="score"
                                label="初始积分"
                                rules={[{ required: true, message: '请输入初始积分' }]}
                            >
                                <Input style={{ width: '100%' }} />
                            </Form.Item>
                            
                            <Form.Item label="开卡人员" >
                                <Row gutter={8}>
                                    <Col span={12}>
                                        <Form.Item
                                            name="openStaff"
                                            noStyle
                                            rules={[{ required: true, message: '请选择开卡人员' }]}
                                        >
                                            <Input style={{ width: '100%' }} />
                                        </Form.Item>
                                    </Col>
                                    <Col span={12}>
                                        <Button>开卡人员</Button>
                                    </Col>
                                </Row>
                            </Form.Item>

                            <Form.Item {...tailFormItemLayout} >
                                <Button style={{marginRight:20}} type="primary" htmlType="submit">
                                    添加
                                </Button>
                                <Button htmlType="submit">
                                    取消
                                </Button>
                            </Form.Item>
                        </div>
                        </Col>
                        </Row>
                       

                    </Form>

                </Card>

        
        </div>

    );
};

export default AddVip;